<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-19 14:20:31
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-10-21 08:45:14
 * @FilePath: \hd_ims_web\src\views\board\boardSelect\board_mould_status copy.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="date_range"
              type="datetimerange"
              placeholder="查询日期"
              style="width: 320px"
              format="yyyy-MM-dd HH:mm"
              autocomplete="off"
              @change="get_info"></el-date-picker>
          </el-form-item>
          <el-radio-group v-model="type" size="small">
            <el-radio-button label="时"></el-radio-button>
            <el-radio-button label="日"></el-radio-button>
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
          </el-radio-group>
        </el-form>
      </el-col>
    </el-row>
    <v-chart :options="option4" class="" :autoresize="true" style="width: 100%; height: 700px"></v-chart>
  </div>
</template>

<script>
import pythonService from '@/api/python/python'
import { exportTable } from '@/utils/ruoyi'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'

const scrollPaging = (() => {
  let total = 0
  let data = []
  let pageSize = 30
  let pageNum = 1
  let loading = false

  return function (queryParams, req) {
    pageSize = queryParams.pageSize || pageSize
    if (queryParams.pageNo <= 1) {
      data = []
      pageNum = 1
    }
    queryParams.pageNo = pageNum
    if (!total || queryParams.pageNo <= Math.ceil(total / queryParams.pageSize)) {
      if (!loading) {
        loading = true
        return req(queryParams).then((response) => {
          loading = false
          data = data.concat(response.data)
          total = response.size
          response.data_paging = data
          pageNum++
          queryParams.pageNo++
          return response
        })
      }
    }
    return Promise.resolve({ data_paging: data })
  }
})()

export default {
  name: 'Mmmeter',
  data() {
    return {
      now_data: {},
      excel_disable: true,
      loading: false,
      total: 21,
      queryParams: {
        pageNo: 1,
        pageSize: 9999,
        input_jitaicode: '',
      },
      type: '日',
      sys_m_data: [],
      curIndex: 0,
      date_range: [this.$moment('2022-08-16'), this.$moment()],
      dataHour: [],
      dataMonth: [],
      dataDay: [],
      moj_code: '',
      //用于补打标签 的 popup modal3
      openDiag: true,
      option: {
        dataset: {
          dimensions: [{ name: 'time_start', type: 'time' }, 'ImpEp'],
          source: [],
        },
        grid: [{ left: '5%', bottom: '80px' }],
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          },
        },
        title: {
          left: 'center',
          text: '用电量',
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'time',
          formatter: '{yyyy}-{MM}-{dd} {HH}',
          splitNumber: 12,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
        },
        dataZoom: [
          {
            type: 'inside',
            start: 80,
            end: 100,
          },
          {
            start: 80,
            end: 100,
          },
        ],
        series: [
          {
            name: '度数',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)',
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'red', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'blue', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            // data: data,
          },
        ],
      },
    }
  },
  methods: {
    querySearch(queryString, cb) {
      listMjmMstr({ pageNum: 1, pageSize: 10, mjmMjbh: queryString }).then((a) => {
        cb(a.rows)
      })
    },
    excel_out() {
      //  exportTable('#tabMoudleWork div', '机台')
    },
    // 通用滚动分页
    scrollPaging() {
      this.queryParams.input_time_start = this.$moment(this.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryParams.input_time_end = this.$moment(this.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
      scrollPaging(this.queryParams, pythonService.getAmmeter).then((res) => {
        this.sys_m_data = res.data_paging
      })
    },
    get_info() {
      this.loading = true
      this.queryParams.pageNo = 1
      this.queryParams.input_time_start = this.$moment(this.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryParams.input_time_end = this.$moment(this.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
      pythonService
        .getAmmeterV2(this.queryParams)
        .then((response) => {
          console.log(response)
          this.option.dataset.source = response.data_shi.data
          this.dataHour = []
          response.data_shi.data.reduce((pre, cur) => {
            this.dataHour.push({ ...cur, date: cur.time_end, impEp: (cur.ImpEp - pre.ImpEp).toFixed(2), zongImpEp: cur.ImpEp_one_hour })
            return cur
          })
          this.dataMonth = []
          response.data_yue.data.reduce((pre, cur) => {
            this.dataMonth.push({ ...cur, date: cur.date, impEp: (cur.ImpEp - pre.ImpEp).toFixed(2) })
            return cur
          })
          this.dataWeek = []
          response.data_zhou.data.reduce((pre, cur) => {
            this.dataWeek.push({ ...cur, date: cur.date, impEp: (cur.ImpEp - pre.ImpEp).toFixed(2) })
            return cur
          })
          this.dataDay = []
          response.data_tian.data.reduce((pre, cur) => {
            this.dataDay.push({ ...cur, date: cur.date, impEp: (cur.ImpEp - pre.ImpEp).toFixed(2) })
            return cur
          })
          this.option2.dataset.source = this.dataDay
          this.total = response.size
          this.loading = false
        })
        .catch((e) => {
          this.sys_m_data = []
          this.queryParams.pageNo = 1
          this.total = 0
        })
    },
  },
  mounted() {
    this.get_info()
  },
  computed: {
    option4() {
      let fmt = this.type === '周' ? 'YY年w周' : this.type === '月' ? 'YY年M月' : this.type === '日' ? 'YYYY-MM-DD' : 'DD日HH时*YY年MM月'
      let dataSource = this.type === '周' ? this.dataWeek : this.type === '月' ? this.dataMonth : this.type === '日' ? this.dataDay : this.dataHour
      let dataZoom = [
        {
          xAxisIndex: [0, 1],
          type: 'inside',
        },
      ]
      if (dataSource.length > 0) dataZoom[0].start = 100 - (24 / dataSource.length) * 100
      return {
        dataset: {
          source: dataSource,
        },
        grid: [
          { left: '5%', top: '7%', height: '40%' },
          { left: '5%', bottom: '7%', height: '40%' },
        ],
        xAxis: [
          {
            gridIndex: 0,
            type: 'time',
            axisLabel: {
              formatter: (v) => {
                return this.$moment(v).format(fmt).replace('*', '\n')
              },
            },
            splitNumber: this.type === '周' ? 1 : this.type === '月' ? 12 : 24,
          },
          {
            gridIndex: 1,
            type: 'time',
            axisLabel: {
              formatter: (v) => {
                return this.$moment(v).format(fmt).replace('*', '\n')
              },
            },
            splitNumber: this.type === '周' ? 1 : this.type === '月' ? 12 : 24,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: 'value',
            axisLabel: {
              formatter: '{value} 元',
            },
          },
          {
            gridIndex: 1,
            type: 'value',
            axisLabel: {
              formatter: '{value} kW·h',
            },
          },
        ],
        dataZoom: dataZoom,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let param = params[0]
            return `时间：${this.$moment(param.data.date).format()} <br >用电量：${param.data.zongImpEp} 度 <br >电费：${param.data.dianfei.toFixed(
              2
            )} 元 `
          },
        },
        series: [
          {
            dimensions: [{ name: 'date', type: 'time' }, 'dianfei'],
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            showBackground: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'red', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'blue', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            label: {
              show: true,
              position: 'top',
              formatter: (a) => {
                return a.data.dianfei.toFixed(1)
              },
            },
          },
          {
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'bar',
            dimensions: [{ name: 'date', type: 'time' }, 'zongImpEp'],
            showBackground: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'red', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'blue', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            label: {
              show: true,
              position: 'top',
              formatter: (a) => {
                return a.data.zongImpEp.toFixed(1)
              },
            },
          },
        ],
      }
    },
  },
}
</script>
<style lang="scss" scoped>
li {
  line-height: normal;
  padding: 7px;
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .highlighted .addr {
    color: #ddd;
  }
}
</style>
